<!--
 * @FileDescription: 登录页面
 * @Author: shy, lym
 * @Date: 2022-02-24
 * @LastEditors: lym
 * @LastEditTime: 2022-03-02
 -->

<template>
  <div id="building_2">
    <div class="login-container">
      <el-form :model="ruleForm" :rules="rules"
               status-icon
               ref="ruleForm"
               label-position="left"
               label-width="0px"
               class="demo-ruleForm login-page">
        <el-form-item style="height:50%; position: absolute; top:-68px">
          <el-button type="text" @click="returnToPublic"><div class="fa fa-arrow-left"/>&emsp;取消登录</el-button>
        </el-form-item>
        <img src='https://pic.imgdb.cn/item/621c26082ab3f51d91c6a8bf.jpg' width="128" height="128">
        <h3 class="title">开启极简数据采集之旅...</h3>
        <el-form-item prop="username">
          <el-input type="text"
                    v-model="ruleForm.username"
                    auto-complete="off"
                    placeholder="用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password"
                    v-model="ruleForm.password"
                    auto-complete="off"
                    placeholder="密码"
          ></el-input>
        </el-form-item>
        <el-form-item style="height:50%;">
          <el-button type="text" @click="handleSignup">注册新用户</el-button>
        </el-form-item>
        <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" @click="handleSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {get} from "@/utils/http";
import {ElMessage} from "element-plus";

export default {
  name: 'UserLogin',
  data() {
    return {
      ruleForm: {
        username: '',
        password: '',
      }, // 登录表单
      rules: {
        username: [{required: true, message: '请输入您的用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入您的密码', trigger: 'blur'}]
      }, // 登录校验规则
    }
  },
  created() {
    let footer = document.getElementById('footer')
    footer.innerHTML = ""
  },
  methods: {
    /**
     * @description: 点击“注册新用户”按钮，跳转注册页面
     * @param {无} 无
     * @return void
     */
    handleSignup() {
      let that = this;
      let router_target = "UserSignup";
      that.$router.push({
        name: router_target
      })
    },

    /**
     * @description: 点击“登录”按钮，完成用户登录
     * @param {无} 无
     * @return void
     */
    handleSubmit() {
      let that = this;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          get('/login', {
            username: that.ruleForm.username,
            password: that.ruleForm.password
          }).then(function (res) {
            if (res.code === 1) {
              // 将用户名密码存储在 session 会话中，路由到个人中心页面
              sessionStorage.setItem("username", that.ruleForm.username);
              sessionStorage.setItem("password", that.ruleForm.password);
              that.$store.commit("login", that.ruleForm.username, that.ruleForm.password)
              let router_target = "PrivateDataset";
              that.$router.push({
                name: router_target
              })
              ElMessage.success({
                showClose: true,
                message: "登入成功，欢迎您 " + that.ruleForm.username,
                type: "success",
                center: true
              })
            } else {
              ElMessage.error({
                showClose: true,
                message: "登陆失败,用户名或密码错误",
                type: "warning",
                center: true
              })
            }

          })
        } else {
          return false;
        }
      })
    },
    returnToPublic() {
      let that = this;
      let router_target = "PublicDataset";
      that.$router.push({
        name: router_target
      })
    }
  }
};
</script>

<style scoped>
.login-container {
  width: 100%;
  height: 100%;
}

.login-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  position: absolute;
  top: 15%;
  left: 65%;
  width: 350px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  opacity: 0.7
}

#building_2 {
  background: url("https://pic.imgdb.cn/item/621c253f2ab3f51d91c5bbff.jpg");
  width: calc(100% + 30px);
  height: calc(100% + 30px);
  position: fixed;
  background-size: 100% 100%;
  margin: -8px -8px;
}
</style>


